import React, { useState } from "react";
import { Layout } from "antd";

import Header from "./Header";
import Footer from "./Footer";
import Sider from "./Sider";
import IdleTimer from "./IdleTimer";

const MainLayout = ({ children }) => {
  const [collapsed, setCollapsed] = useState(false);
  const toggle = () => {
    setCollapsed(!collapsed);
  };
  return (
    <IdleTimer>
      <Layout style={{ minHeight: "100vh" }}>
        <Sider collapsed={collapsed} />
        <Layout>
          <Header collapsed={collapsed} onCollapse={toggle} />
          <Layout.Content
            style={{
              margin: "24px 16px",
              padding: 24,
              background: "#fff",
              minHeight: 280
            }}
          >
            {children}
          </Layout.Content>
          <Footer />
        </Layout>
      </Layout>
    </IdleTimer>
  );
};

export default MainLayout;
